<template>
  <div class="my">
  	<div class="mybaseinfo">
  		<div class="usericon"><img :src="userinfo.src"></div>
  		<div class="userinfo">
  			<div class="username">{{userinfo.name}}</div>
  			<div class="usertext"><span class="bodyHeight">身高：{{userinfo.bodyHeight}}cm</span><span class="bodyWeight">体重：{{userinfo.bodyWeight}}KG</span></div>
  		</div>
  		<router-link to="/setting" class="setting">设置</router-link>
  	</div>
  	<div class="row-model focus">
  		<div class="row-title focustitle">
  			<span class="title-icon-heart yadu-icon-31guanzhu1xuanzhong"></span>
  			<span class="titletext">关注点</span>
  			<router-link to="/edittopics" class="title-icon-edit yadu-icon-xiugai1"></router-link>
  		</div>
  		<div class="row-list focuslist">
  			<span class="row-item focusitem" v-for="item,i in userinfo.focuslist" :key="i">{{item.name}}</span>
  		</div>
  	</div>
    <div class="row-model clock">
      <div class="row-title clocktitle">
        <span class="title-icon-clock yadu-icon-naozhong"></span>
        <span class="titletext">提醒</span>
        <router-link to="/editclock" class="title-icon-edit yadu-icon-xiugai1"></router-link>
      </div>
      <div class="row-list clocklist">
        <span class="row-item clockitem" v-for="item,i in userinfo.clocklist" :key="i">{{item.time}}</span>
      </div>
    </div>
    <div class="row-model othermodel">
      <div class="row-title">
        <span class="title-icon-bingli yadu-icon-bingli"></span>
        <span class="titletext">病例</span>
        <router-link to="/editrecords" class="title-icon-play yadu-icon-xiangyou"></router-link>
      </div>
      <div class="row-title qrcode">
        <span class="title-icon-qrcode yadu-icon-Group-"></span>
        <span class="titletext">二维码</span>
        <router-link to="/qrcode" class="title-icon-play yadu-icon-xiangyou"></router-link>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'my',
  components: {
  },
  data(){
  	return{
  		userinfo:{
  			name:'这里是昵称',
  			src:'http://static.ydcss.com/uploads/lightbox/meizu_s1.jpg',
  			bodyHeight:160,
  			bodyWeight:52,
  			focuslist:[
  				{name:'健康',id:1},
  				{name:'养生',id:2},
  				{name:'养颜',id:3},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
          {name:'跳舞',id:4},
  				{name:'跳舞',id:4}
  			],
        clocklist:[
          {time:'06:00',id:1},
          {time:'07:00',id:2},
          {time:'08:00',id:3},
          {time:'09:00',id:4},
          {time:'10:00',id:5},
          {time:'11:00',id:6},
          {time:'12:00',id:7},
        ]
  		}
  	}
  }
}
</script>
<style lang="scss">
	@import "../style/public.scss";
	.my{
    background:#f1f1f1;
    height:100%;
		.mybaseinfo{
			height:rem(176);
			display:flex;
    		padding:rem(34) rem(20) rem(42);
    		background:$defaultcolor;
    		.usericon{
    			height:rem(100);
    			line-height:rem(100);
    			margin-right:rem(28);
    			img{
            border-radius:rem(8);
    				height:rem(100);
    				width:rem(100);
    				vertical-align:middle;
    			}
    		}
    		.userinfo{
    			display:flex;
    			text-align:left;
    			flex-direction:column;
    			flex:1;
    			align-self:center;
    			.username{
    				font-size:rem(40);
    				color:#fff;
    				margin-bottom:rem(18);
    			}
    			.usertext{
    				font-size:rem(24);
    				color:#fff;
    				display:flex;
    				justify-content:space-between;
    				.bodyWeight{
    					margin-right:rem(20);
    				}
    			}
    		}
    		.setting{
    			font-size:rem(32);
    			color:#fff;
    		}
		}
		.row-model{
      background:#fff;
      &.clock{
        margin-top:rem(20);
      }
      &.othermodel{
        margin-top:rem(20);
        .row-title{
          padding:rem(28) 0;
        }
      }
			padding:0 rem(20);
			.row-title{
				display:flex;
        align-items:center;
        padding:rem(14) 0;
        border-bottom:rem(2) solid #f8f8f8;
        .title-icon-heart{
          height:rem(28);
          line-height:rem(28);
          color:$defaultcolor;
          margin-right:rem(16);
        }
        .title-icon-clock{
          height:rem(28);
          line-height:rem(28);
          color:#61a2ed;
          margin-right:rem(18);
        }
        .title-icon-bingli{
          color:#e27a1f;
          height:rem(28);
          line-height:rem(28);
          margin-right:rem(18);
        }
        .title-icon-qrcode{
          color:$defaultcolor;
          height:rem(28);
          line-height:rem(28);
          margin-right:rem(18);
        }
        .title-icon-play{
          color:#707070;
          height:rem(28);
          line-height:rem(28);
        }
				.titletext{
          height:rem(28);
          line-height:rem(28);
          flex:1;
          text-align:left;
          align-self:center;
					align-self:center;
				}
        .title-icon-edit{
          height:rem(28);
          line-height:rem(28);
          color:#ebebeb;
        }
			}
      .row-list{
        display:flex;
        padding:rem(36) 0;
        flex-wrap:nowrap;
        overflow-x:auto;
        &::-webkit-scrollbar {
            display: none;
        }
        .row-item{
          white-space: nowrap;
          padding:rem(4) rem(36);
          margin-right:rem(40);
          &.focusitem{
            box-shadow:0 0 rem(12) 0 rgba(65,203,71,.3);
            color:$defaultcolor;
            background:#e2f1e3;
          }
          &.clockitem{
            background:#c9e3f9;
            box-shadow:0 0 rem(12) 0 rgba(0,112,255,.3);
            color:#61a2ed;
          }
          font-size:rem(24);
          border-radius:rem(22);
          height:rem(44);
          line-height:rem(36);
        } 
      }
		}
	}
</style>
